<template>
  <view>
    <!--  -->
    <view class="container">
      <image src="../../static/imgs/Frame 13.png" mode=""></image>
      <view class="title">
        <u-icon name="arrow-left" color="black" size="30"></u-icon>
        <text class="title_name">活动订单详情</text>
      </view>
    </view>

    <!--  -->
    <view class="content">
      <view class="title">摄影大赛</view>
      <view class="time">
        <view class="time1">有效时间</view>
        <view class="time2">2023年8月1日-2023年10月1日 </view>
        <view class="time3">未提交参赛作品随时退</view>
      </view>
      <view class="name">
        <view class="item1">姓名</view>
        <view class="item2">徐佳</view>
      </view>
      <view class="phone">
        <view class="item1">联系方式</view>
        <view class="item2">13994371114</view>
      </view>
      <view class="category">
        <view class="item1">报名类目</view>
        <view class="item2">舞蹈</view>
      </view>
      <view class="mailbox">
        <view class="item1">邮箱</view>
        <view class="item2">8968451@qq.com</view>
      </view>
    </view>

    <!--  -->
    <view class="payment">
      <view class="price">
        ￥
        <text>29.9</text>
      </view>
      <view class="button">
        <button>立即支付</button>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {

      }
    },
    methods: {

    }
  }
</script>

<style scoped lang="scss">
  // 
  .container {
    position: relative;
    width: 750rpx;
    height: 176rpx;

    >image {
      width: 100%;
      height: 100%;
    }

    .title {
      position: absolute;
      bottom: 28rpx;
      left: 32rpx;
      font-weight: bold;
      color: #333333;

      .title_name {
        font-size: 32rpx;
        margin-left: 220rpx;
      }
    }
  }

  // 
  .content {
    margin: 32rpx auto;
    width: 686rpx;
    height: 816rpx;
    background: #FFFFFF;
    border-radius: 16rpx 16rpx 16rpx 16rpx;

    .title {
      padding: 32rpx;
      border-bottom: 1rpx solid #eee;
      font-size: 28rpx;
      font-family: PingFang SC-Bold, PingFang SC;
      font-weight: bold;
      color: #333333;
    }

    .time {
      padding: 32rpx;
      border-bottom: 1rpx solid #eee;

      .time1 {
        font-size: 28rpx;
        font-family: PingFang SC-Bold, PingFang SC;
        font-weight: bold;
        color: #333333;
      }

      .time2 {
        margin: 15rpx 0;
        font-size: 24rpx;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 500;
        color: #333333;
      }

      .time3 {
        font-size: 24rpx;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 500;
        color: #FF4E4E;
      }
    }

    .name,
    .phone,
    .category,
    .mailbox {
      padding: 24rpx 32rpx;
      border-bottom: 1rpx solid #eee;

      .item1 {
        margin-bottom: 10rpx;
        font-size: 28rpx;
        font-family: PingFang SC-Bold, PingFang SC;
        font-weight: bold;
        color: #333333;
      }

      .item2 {
        font-size: 24rpx;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 500;
        color: #333333;
      }
    }
  }

  .payment {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 440rpx;
    padding: 0 58rpx;
    width: 750rpx;
    height: 98rpx;
    background: #FFFFFF;

    .price {
      font-size: 32rpx;
      color: #EF5353;

      >text {
        margin-left: 5rpx;
        font-size: 48rpx;
        font-family: PingFang SC-Bold, PingFang SC;
        font-weight: bold;
      }
    }

    .button {

      >button {
        display: inline-block;
        width: 244rpx;
        height: 66rpx;
        line-height: 66rpx;
        background: linear-gradient(90deg, #FF7302 0%, #FF5210 100%);
        border-radius: 84rpx 84rpx 84rpx 84rpx;
        font-size: 28rpx;
        font-family: DIN-Bold, DIN;
        font-weight: bold;
        color: #FFFFFF;
      }
    }
  }
</style>